<?php
/**
 * Created by PhpStorm.
 * User: sunshubo
 * Date: 2017/9/15
 * Time: 15:51
 */
?>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <link rel="stylesheet" type="text/css" href="/static/css/base.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="/static/css/dpl.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="https://wx-static.drip.im/css/shop/form/preview.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="https://wx-static.drip.im/css/shop/form/activity.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css"
          href="https://wx-static.drip.im/css/fonts/form/iconfont.css?t=1505204250563"/>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="/static/js/qrcode.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 上传组件-->
    <script type="text/javascript" src="/static/js/webupload/webuploader.js"></script>
    <script type="text/javascript" src="/static/js/webupload/webupload.all.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jquery-form/form@4.2.2/dist/jquery.form.min.js"
            integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i"
            crossorigin="anonymous"></script>
    <title> 文思学堂 - 作业完成情况</title>
</head>
<body>
<div class="screen">
    <div id="form" class='ui-form style_9'>
        <div id="myAlert" class="alert alert-danger alert-float hidden">
            <a href="#" class="close">&times;</a>
            <strong>错误！</strong>
            <txt id="myMsg"></txt>
        </div>
        <div class="ui-title"> 文思学堂 - 作业完成情况</div>

        <div class="ui-content form-fields">
            <div class="form-desc">
                <p>根据每个孩子的情况，有针对性的辅导，并填写作业相关的数据。</p>
            </div>
            <form action='' enctype="multipart/form-data" method="post" name="fileForm">
                <label>
                    <input id="sex" type="hidden" name="sex" value="0">
                    <input id="exec" type="hidden" name="exec" value="0">
                </label>
                <div class="ui-field  " id="field_133" data-field-id="133" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="就读学校">
                    <label class="field-label"> 就读学校 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="school" id="school">
                            <option value="999">请选择</option>
                            <option value="1">雍雅锦江小学</option>
                            <option value="2">北豆小学</option>
                            <option value="3">南豆小学</option>
                            <option value="4">中仰陵小学</option>
                            <option value="5">东仰陵小学</option>
                            <option value="6">宋营小学</option>
                            <option value="7">想象国际小学</option>
                            <option value="8">高新区第一小学</option>
                            <option value="9">高新区第二小学</option>
                            <option value="10">精英小学</option>
                            <option value="11">54中学</option>
                            <option value="12">师大附中</option>
                            <option value="13">南辛庄小学</option>
                            <option value="14">高新区第四小学</option>
                            <option value="15">高新区第五小学</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_129" data-field-id="129" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="所在年级">
                    <label class="field-label"> 所在年级 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="grade" id="grade">
                            <option value="999">请选择</option>
                            <option value="1">一年级</option>
                            <option value="2">二年级</option>
                            <option value="3">三年级</option>
                            <option value="4">四年级</option>
                            <option value="5">五年级</option>
                            <option value="6">六年级</option>
                            <option value="7">初一</option>
                            <option value="8">初二</option>
                            <option value="9">初三</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="所在班级">
                    <label class="field-label"> 所在班级 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="class" id="class">
                            <option value="999">请选择</option>
                            <option value="1">1班</option>
                            <option value="2">2班</option>
                            <option value="3">3班</option>
                            <option value="4">4班</option>
                            <option value="5">5班</option>
                            <option value="6">6班</option>
                            <option value="7">7班</option>
                            <option value="8">8班</option>
                            <option value="9">9班</option>
                            <option value="10">10班</option>
                            <option value="11">11班</option>
                            <option value="12">12班</option>
                            <option value="13">13班</option>
                            <option value="14">14班</option>
                            <option value="15">15班</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="姓名">
                    <label class="field-label"> 姓名 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="name" id="name">
                            <option value="999">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  center" id="field_112" data-field-id="112" data-field-type="splitLine"
                     data-validate='{&quot;required&quot;:false}' data-rule='[]' data-field-label="更多内容，建议填写">
                    <div class="field-content">
                        <div class="split-line">
                            <span>课程内容，认真填写</span>
                        </div>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="课程">
                    <label class="field-label"> 课程 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="course" id="course">
                            <option value="999">请选择</option>
                            <option value="1">语文</option>
                            <option value="2">数学</option>
                            <option value="3">英语</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="自主完成率">
                    <label class="field-label"> 自主完成率 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="completion_rate" id="completion_rate">
                            <option value="999">请选择</option>
                            <option value="1">10%</option>
                            <option value="2">20%</option>
                            <option value="3">30%</option>
                            <option value="4">40%</option>
                            <option value="5">50%</option>
                            <option value="6">60%</option>
                            <option value="7">70%</option>
                            <option value="8">80%</option>
                            <option value="9">90%</option>
                            <option value="10">100%</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="错题率">
                    <label class="field-label"> 错题率 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="error_rate" id="error_rate">
                            <option value="999">请选择</option>
                            <option value="1">10%</option>
                            <option value="2">20%</option>
                            <option value="3">30%</option>
                            <option value="4">40%</option>
                            <option value="5">50%</option>
                            <option value="6">60%</option>
                            <option value="7">70%</option>
                            <option value="8">80%</option>
                            <option value="9">90%</option>
                            <option value="10">100%</option>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="错题类型">
                    <label class="field-label"> 错题类型 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <input id="error_type" type="text" class="ui-input" placeholder="错题类型" name="error_type"/>
                    </div>
                </div>
                <div class="ui-field  " id="field_124" data-field-id="124" data-field-type="textArea"
                     data-validate='{&quot;required&quot;:false}' data-rule='[]' data-field-label="错题内容">
                    <label class="field-label">
                        错题内容
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                            <textarea id="late_mark" name="late_mark" class="ui-textarea"
                                      placeholder="哪门课程，第几章，第几节，第几道题"></textarea>
                    </div>
                </div>
                <div class="ui-field  " id="field_137" data-field-id="137" data-field-type="select"
                     data-validate='{&quot;required&quot;:true}' data-rule='[]' data-field-label="辅导老师">
                    <label class="field-label"> 辅导老师 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div class="field-content">
                        <select class="ui-select" name="tutor" id="tutor">
                            <option value="999">请选择</option>
                            <?php echo $option; ?>
                        </select>
                    </div>
                </div>
                <div class="ui-field  " id="field_138" data-field-id="138" data-field-type="upload">
                    <label class="field-label"> 作业照片留底 <span class="required">*</span>
                        <span class="tips"></span>
                    </label>
                    <div id="uploader-demo">
                        <!--用来存放item-->
                        <div id="thelist" class="uploader-list"></div>
                        <div>
                            <div id="filePicker">选择图片</div>
                        </div>
                    </div>
                    <label hidden>
                        <textarea id="fileList" name="fileList"></textarea>
                    </label>
                </div>
            </form>
            <div>
                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </div>
            <button onclick="subimtBtn();" class="ui-button green" id="submit" data-toggle="modal"
                    data-target="#myModal">
                <span class="glyphicon glyphicon-tree-conifer"></span> 提交
            </button>
        </div>
        <div id="dui-alert-tpl" type="text/template" class="hidden">
            <div class="dui-dialog-box">
                <div class="dui-mask"></div>
                <div class="dui-dialog">
                    <div class="dialog-hd">提示</div>
                    <div id="msg" class="dialog-bd"></div>
                    <div class="dialog-ft">
                        <a>确定</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="loading" class="submit-loading hidden">
            <div class="wrap">
                <div class="circle"></div>
                <p>提交中</p></div>
        </div>
        <div class="submit-loading">
            <div class="wrap">
                <div class="circle"></div>
                <p>加载中</p></div>
        </div>
        <footer class="drip-footer">
            <p> © <a href="/">文思学堂</a> 最终解析权 </p>
        </footer>
    </div>
    <div id='userinfo' class='ui-form style_9 hidden'>
        <div class="ui-title"> 文思学堂 - 作业完成情况</div>
        <div class="tips-box">
            <img src="https://wx-static.drip.im/img/shop/single/form/success.png?t=1505204250563" width='48px'
                 height='48px'/>
            <p class="tips">恭喜，提交成功！</p>
            <div>
                <a href="/"
                   class="showData">
                    <img src="https://wx-static.drip.im/img/shop/single/form/show-data.png?t=1505204250563"/>
                    返回首页
                </a>
            </div>
            <div>
                <a href="/mark"
                   class="formBack showData">
                    <img src="https://wx-static.drip.im/img/shop/single/form/form-back.png?t=1505204250563" alt="">
                    继续填写
                </a>
            </div>
        </div>
        <footer class="drip-footer">
            <p> © <a href="/">文思学堂</a> 最终解析权 </p>
        </footer>
    </div>
</div>
</body>
<script nonce="99b4ecf93d7b2b23">
    var smp = {'school': null, 'grade': null, 'class': null};
    //初始化
    $(function () {
        $.get('public/query', function (data, status) {
            console.log(strToJson(data));
            $(".submit-loading").addClass("hidden");
        });
    });
    //close dialogBox
    $(document).click(function () {
        $("#dui-alert-tpl").addClass("hidden");
    });
    $(".close").click(function () {
        $("#myAlert").addClass("hidden");
    });
    //select change
    $(".ui-select").change(function () {
        $(this).css("color", this.value === '999' ? "" : "#333");
        if (this.id !== 'name'
            && this.id !== 'course'
            && this.id !== 'error_rate'
            && this.id !== 'error_type'
            && this.id !== 'tutor'
            && this.id !== 'completion_rate') {
            selectChange(this.id, this.value);
        }
    });
    //click event
    $("#nv").click(function () {
        $("#nv").attr("class", "radio-outside radio-checked");
        $("#nan").attr("class", "radio-outside");
        $("#sex").attr("value", "2");
    });
    $("#nan").click(function () {
        $("#nan").attr("class", "radio-outside radio-checked");
        $("#nv").attr("class", "radio-outside");
        $("#sex").attr("value", "1");
    });
    $("#checkbox_1").click(function () {
        const cls = $("#checkbox_1").attr("class");
        const vlue = $("#exec").attr("value");
        if (cls == "checkbox-outside checkbox-checked") {
            $("#checkbox_1").attr("class", "checkbox-outside");
            $("#exec").attr("value", Number(vlue) - 1);
        } else {
            $("#checkbox_1").attr("class", "checkbox-outside checkbox-checked");
            $("#exec").attr("value", Number(vlue) + 1);
        }
    });
    $("#checkbox_2").click(function () {
        const cls = $("#checkbox_2").attr("class");
        const vlue = $("#exec").attr("value");
        if (cls == "checkbox-outside checkbox-checked") {
            $("#checkbox_2").attr("class", "checkbox-outside");
            $("#exec").attr("value", Number(vlue) - 2);
        } else {
            $("#checkbox_2").attr("class", "checkbox-outside checkbox-checked");
            $("#exec").attr("value", Number(vlue) + 2);
        }
    });
    $("#checkbox_3").click(function () {
        const cls = $("#checkbox_3").attr("class");
        const vlue = $("#exec").attr("value");
        if (cls == "checkbox-outside checkbox-checked") {
            $("#checkbox_3").attr("class", "checkbox-outside");
            $("#exec").attr("value", Number(vlue) - 3);
        } else {
            $("#checkbox_3").attr("class", "checkbox-outside checkbox-checked");
            $("#exec").attr("value", Number(vlue) + 3);
        }
    });
    //    $("button").click(function () {
    //        if ($("#name").val() === "") {
    //            $("#name").focus();
    //            $("#name_err").html("请填写");
    //            return;
    //        }
    //        //页面loading
    //        $("#loading").removeClass("hidden");
    //        //组装data
    //        const data = {
    //            'action': 'task',
    //            'name': $("#name").val(),
    //            'completion_rate': $("#completion_rate").val(),
    //            'school': $("#school").val(),
    //            'grade': $("#grade").val(),
    //            'class': $("#class").val(),
    //            'course': $("#course").val(),
    //            'error_rate': $("#error_rate").val(),
    //            'error_type': $("#error_type").val(),
    //            'tutor': $("#tutor").val(),
    //            'late_mark': $("#late_mark").val()
    //        };
    //        console.log(data);
    //        //提交请求
    //        $.post('task/update', data, function (data, status) {
    //            const r = strToJson(data);
    //            if (r.result === 0) {
    //                $("#form").addClass("hidden");
    //                $("#userinfo").removeClass("hidden");
    //            } else {
    ////                $("#myAlert").removeClass("hidden").fadeIn();
    ////                $("#dui-alert-tpl").removeClass("hidden");
    //                $("#msg").html(r.msg);
    //                $("#myMsg").html(r.msg);
    //                $(".modal-body").html(r.msg);
    //            }
    //            $("#loading").addClass("hidden");
    //        });
    //    });

    function selectChange(id, val) {
        var sk = false;
        for (var i in smp) {
            if (i === id) {
                smp[i] = val;
            }
        }
        $.each(smp, function (i, n) {
            if (smp[i] === null) {
                sk = true;
            }
        });
        if (!sk) {
            $("#name").empty();
            $("#name").append('<option value="999">请选择</option>');
            $.post('public/query', smp, function (data, status) {
                var sk = strToJson(data);
                for (var i in sk.data) {
                    $("#name").append("<option value='" + sk.data[i].id + "'>" + sk.data[i].name + "</option>");
                }
            });
        }
    }

    //str to json
    function strToJson(str) {
        return eval('(' + str + ')');
    }

    function dialogBox() {
        $("#dui-alert-tpl").addClass("hidden");
    }

    function msg_dialog(r) {
        $("#msg").html(r.msg);
        $("#myMsg").html(r.msg);
        $(".modal-body").html(r.msg);
    }

    function subimtBtn() {
        var form = $("form[name=fileForm]");
        var options = {
            url: 'task/update',
            type: 'post',
            dataType: "json",
            success: function (data) {
                console.log(data);
                sk(data);
            }
        };
        form.ajaxSubmit(options);
    }

    function sk(r) {
        if (r.result === 0) {   //success
            $("#form").addClass("hidden");
            $("#userinfo").removeClass("hidden");
            $(".modal-body").html(r.msg);
        } else {    //error
            msg_dialog(r);
        }
        $("#loading").addClass("hidden");
    }
</script>
</html>